<!DOCTYPE html>
<html lang="zh" xmlns: xmlns: xmlns: xmlns: xmlns: xmlns:>
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<!-- vue不能够直接作用在body元素上-->
<body>
        <!--
          v-if,顾名思义,条件判断.当得到结果为true时,所在的元素才会被渲染.
          v-if="布尔表达式"
        -->

        <!-- div指定vue的作用范围-->
        <div id="app">
         <button @click="show=!show">点我就干你</button>
            <div v-if="show">div</div>
        </div>
</body>
<script>
    /*每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.*/
    new Vue({
        el:"#app",//每个Vue实例都需要关联一段HTml模板,Vue会基于此模板进行视图渲染.我们可以通过el属性来指定.
        data: {//当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染.并且"监视"data中的属性变化,

           show:true
        }
     });

</script>
</html>